<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String contextPath = request.getContextPath(); 
    request.setAttribute("contextPath", contextPath);%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>平台收益统计</title>

    <!-- Bootstrap Core CSS -->
    <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${contextPath}/css/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${contextPath}/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--common Css-->
    <link href="${contextPath}/css/common.css" rel="stylesheet">
    
    <link href="${contextPath}/iconfont/iconfont.css" rel="stylesheet">

</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <%@include file="nav.jsp"%>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">平台收益统计</h3>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-sm-2">
                <select class="form-control" id="choose">
                    <option value="1">柱状图每期</option>
                    <option value="2">折线图每期</option>
                    <option value="3">柱状图每天</option>
                    <option value="4">折线图每天</option>
                </select>
            </div>
            <div class="col-sm-2">
                <div class="form-group" id="recent">
                    <label class="sr-only" for="exampleInput"></label>
                    <div class="input-group">
                        <div class="input-group-addon">最近</div>
                        <input type="text" class="form-control" id="exampleInput">
                        <div class="input-group-addon">期</div>
                    </div>
                </div>
            </div>
            <div id="container" style="min-width:400px;height:400px"></div>
        </div>
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- jQuery -->
<script src="${contextPath}/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${contextPath}/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="${contextPath}/js/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="${contextPath}/js/sb-admin-2.min.js"></script>
<script src="${contextPath}/js/highcharts.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    $(function () {
        var chart = Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: '平台收益统计'
            },
            subtitle: {
                text: ''
            },
            credits:{
                enabled: false,
            },
            xAxis: {
                categories: 
                [
		            <%
		            Map<String, List<String>> map =(Map<String, List<String>>)request.getAttribute("map");
		            List<String> list=map.get("eachyList");
		            for(String s:list){
		            %>
		            	<%="'"+s+"',"%>
		            <%
		            }
		            %>
	            ],
                crosshair: true
            },
            yAxis: {
                min: -1000,
                title: {
                    text: '金额 (元)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.2f} 元</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: '每期收益',
                data: 
                	<%
		            Map<String, List<String>> map1 =(Map<String, List<String>>)request.getAttribute("map");
		            List<String> list1=map1.get("eachyIncomexList");
		            %>
		            <%=list1%>
		            
		            
            }]
        });

        $("#choose").change(function(){
            var val = $(this).val();
            if(val == 1){
                editDiv('期');
                chart.update({
                    chart: {
                        type:'column'
                    },
                    xAxis: {
                        categories: 
                       	[
           		            <%
           		            Map<String, List<String>> map2 =(Map<String, List<String>>)request.getAttribute("map");
           		            List<String> list2=map2.get("eachyList");
           		            for(String s1:list2){
           		            %>
           		            	<%="'"+s1+"',"%>
           		            <%
           		            }
           		            %>
           	            ],
                        crosshair: true
                    },
                    series: [{
                        name: '每期收益',
                        data: 
                        	<%
        		            Map<String, List<String>> map3 =(Map<String, List<String>>)request.getAttribute("map");
        		            List<String> list3=map3.get("eachyIncomexList");
        		            %>
        		            <%=list3%>
                    }]
                });
            }else if(val == 2){
                editDiv('期');
                chart.update({
                    chart: {
                        type:'line'
                    },
                    xAxis: {
                        categories: 
                       	[
           		            <%
           		            Map<String, List<String>> map4 =(Map<String, List<String>>)request.getAttribute("map");
           		            List<String> list4=map4.get("eachyList");
           		            for(String s2:list4){
           		            %>
           		            	<%="'"+s2+"',"%>
           		            <%
           		            }
           		            %>
           	            ],
                        crosshair: true
                    },
                    series: [{
                        name: '每期收益',
                        data: 
                        	<%
        		            Map<String, List<String>> map5 =(Map<String, List<String>>)request.getAttribute("map");
        		            List<String> list5=map5.get("eachyIncomexList");
        		            %>
        		            <%=list5%>
                    }]
                });
            }else if(val == 3){
                editDiv('天');
                chart.update({
                    chart: {
                        type:'column'
                    },
                    xAxis: {
                        categories:
                       	[
           		            <%
           		            Map<String, List<String>> map6 =(Map<String, List<String>>)request.getAttribute("map");
           		            List<String> list6=map6.get("dateyList");
           		            for(String s3:list6){
           		            %>
           		            	<%="'"+s3+"',"%>
           		            <%
           		            }
           		            %>
           	            ],
                        crosshair: true
                    },
                    series: [{
                        name: '每天收益',
                        data: 
                        	<%
        		            Map<String, List<String>> map7 =(Map<String, List<String>>)request.getAttribute("map");
        		            List<String> list7=map7.get("dateyIncomexList");
        		            %>
        		            <%=list7%>
                    }]
                });
            }else if(val == 4){
                editDiv('天');
                chart.update({
                    chart: {
                        type:'line'
                    },
                    xAxis: {
                        categories:
                       	[
           		            <%
           		            Map<String, List<String>> map8 =(Map<String, List<String>>)request.getAttribute("map");
           		            List<String> list8=map8.get("dateyList");
           		            for(String s4:list8){
           		            %>
           		            	<%="'"+s4+"',"%>
           		            <%
           		            }
           		            %>
          	            ],
                        crosshair: true
                    },
                    series: [{
                        name: '每天收益',
                        data: 
                        	<%
        		            Map<String, List<String>> map9 =(Map<String, List<String>>)request.getAttribute("map");
        		            List<String> list9=map9.get("dateyIncomexList");
        		            %>
        		            <%=list9%>
                    }]
                });
            }
        });

        //on绑定事件
        $("#recent").on('change', '#exampleInput', function(){
            //获取图表类型
            var chatVal = $("#choose").val();
            //获取输入数字
            var num = $(this).val();
            
            var reg = /^\+?[1-9][0-9]*$/;    
            
            if(chatVal == 1 || chatVal == 2){
                if (!reg.test(num)) {
                    notice('请输入正整数');
                    dispear();
                    return false;
                }
                if(num > 60){
                    notice('期数不能大于60期');
                    dispear();
                    return false;
                }
            }

            if(chatVal == 3 || chatVal == 4){
                if (!reg.test(num)) {
                    notice('请输入正整数');
                    dispear();
                    return false;
                }
                if(num > 30){
                    notice('天数不能大于30天');
                    dispear();
                    return false;
                }
            }

            if(chatVal == 1){
                $.ajax({
                    url: "${contextPath}/WebManager/statistics/ConditionQuery",
                    data: {chatVal: chatVal, num: num},
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        var valeachyList=data.eachyList; 
                        var eachyIncomexListList=data.eachyIncomexList; 
                    	chart.update({
                            chart: {
                                type:'column'
                            },
                            xAxis: {
                                categories:valeachyList,
                                crosshair: true
                            },
                            series: [{
                                name: '每期收益',
                                data: eachyIncomexListList
                                	
                            }]
                        });
                    }
                })
            }else if(chatVal == 2){
                $.ajax({
                    url: '${contextPath}/WebManager/statistics/ConditionQuery',
                    data: {chatVal: chatVal, num: num},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                    	var valeachyList1=data.eachyList; 
                        var eachyIncomexListList1=data.eachyIncomexList; 
                        chart.update({
                            chart: {
                                type:'line'
                            },
                            xAxis: {
                                categories: valeachyList1,
                                crosshair: true
                            },
                            series: [{
                                name: '每期收益',
                                data: eachyIncomexListList1
                            }]
                        });
                    }
                })
            }else if(chatVal == 3){ 	
                $.ajax({
                    url: '${contextPath}/WebManager/statistics/ConditionQuery',
                    data: {chatVal: chatVal, num: num},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                    	var dateyListVar=data.dateyList; 
                        var dateyIncomexListVar=data.dateyIncomexList; 
                        //console.log(dateyListVar);
                        //console.log(dateyIncomexListVar);
                        chart.update({
                            chart: {
                                type:'column'
                            },
                            xAxis: {
                                categories: dateyListVar,
                                crosshair: true
                            },
                            series: [{
                                name: '每期收益',
                                data: dateyIncomexListVar
                            }]
                        });
                    }
                })
            }else if(chatVal == 4){
                $.ajax({
                    url: '${contextPath}/WebManager/statistics/ConditionQuery',
                    data: {chatVal: chatVal, num: num},
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                    	var dateyListVar1=data.dateyList; 
                        var dateyIncomexListVar1=data.dateyIncomexList; 
                        //console.log(dateyListVar1);
                        //console.log(dateyIncomexListVar1);
                        chart.update({
                            chart: {
                                type:'line'
                            },
                            xAxis: {
                                categories: dateyListVar1,
                                crosshair: true
                            },
                            series: [{
                                name: '每期收益',
                                data: dateyIncomexListVar1
                            }]
                        });
                    }
                })
            }
        });

        //修改div
        function editDiv(param){
            var str = '';
            str += '<label class="sr-only" for="exampleInput"></label>';
            str += '<div class="input-group">';
            str += '<div class="input-group-addon">最近</div>';
            str += '<input type="text" class="form-control" id="exampleInput">';
            str += '<div class="input-group-addon">'
            str += param;
            str += '</div>';
            str += '</div>';
            $("#recent").html(str);
        }
        
        //提示信息封装函数
    	function notice(notice) {
            var str = '';
            str += '<div class="popupTip" style="padding-right:20px">';
            str += notice;
            str += '<span class="iconfont icon-quxiao remove"></span>';
            str += '</div>';
            str += '<></div>';
            //wrapper插入str
            $("#wrapper").append(str);
        }
	    //取消提示框
	    $("#wrapper").on('click', '.remove', function(){
	        $(".popupTip") .hide();
	    });

        function dispear(){
            setTimeout(function(){
                $(".popupTip").hide();
            }, 3000);
        }
       
    });

</script>

</body>

</html>
